<template>
    <div class="orderP">
     <Header/>
    <div class="order-page">
       
        <h1 style="color:#fff;">订单列表</h1>
        <table>
            <thead>
                <tr style="color:#fff">
                    <th>订单号</th>
                    <th>手机</th>
                    <!-- <th>状态</th> -->
                    <th>创建时间</th>
                    <th>短剧名称</th>
                </tr>
            </thead>
            <tbody v-if="orders.length > 0">
                <tr v-for="(order) in orders" :key="order.id" style="color:#b9bfb9">
                    <td>{{ order.id }}</td>
                    <td>{{ order.phone }}</td>
                    <!-- <td>{{ order.status }}</td> -->
                    <td>{{ order.created_at }}</td>
                    <td>{{ order.name }}</td>
               
                </tr>
            </tbody>
            <tbody v-else>
                <tr>
                    <td colspan="5">暂无订单</td>
                </tr>
            </tbody>
        </table>
        <!-- <el-table
            :data="tableData"
            stripe
            style="width: 100%">
            <el-table-column
            prop="date"
            label="日期"
            width="180">
            </el-table-column>
            <el-table-column
            prop="name"
            label="姓名"
            width="180">
            </el-table-column>
            <el-table-column
            prop="address"
            label="地址">
            </el-table-column>
        </el-table> -->
    </div>
</div>
</template>

<script>
import { OrderListApi } from '@/api/home';
import Header  from '../components/header.vue';
export default {
    name: 'Order',
    components:{
        Header
    },
    data() {
        return {
            orders: {
                phnoe: '',
            },
            tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
        };
    },
    
    created() {
        // this.getOrderList();
        console.log(91,localStorage.getItem('orderList'))
        let data = localStorage.getItem('orderList')
        if(data){
            this.orders =JSON.parse(data) 
        }
        
        
    },
    methods: {
        // 获取数据
        // async getOrderList() {
        //     const res = await OrderListApi();
        //     this.orders = res.data;
        //     console.log('data  ----->  ', res.data);
        // },
        // cancelOrder(index) {
        //     // 取消订单的逻辑处理，可以发送 API 请求等
        //     this.orders.splice(index, 1);
        // },
    },
};
</script>

<style scoped>
.order-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
    background: #14161a!important;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

button {
    padding: 5px 10px;
}
</style>
